import React from 'react';
import { Pagination } from 'antd';
import styled from 'styled-components';


interface CustomPaginationProps {
  current: number;
  pageSize: number;
  total: number;
  onChange: (page: number) => void;
  onPageSizeChange: (pageSize: number) => void;
  prevIcon?: React.ReactNode;
  nextIcon?: React.ReactNode;
}


const PaginationButton = styled.button`
  background: #f0f2f5;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  transition: all 0.3s;

  &:hover {
    color: #1890ff;
    border-color: #1890ff;
    background: #e6f7ff;
  }

  &:disabled {
    cursor: not-allowed;
    color: #d9d9d9;
    background: #f5f5f5;
    border-color: #d9d9d9;
  }
`;


const CustomPagination: React.FC<CustomPaginationProps> = ({
  current,
  pageSize,
  total,
  onChange,
  onPageSizeChange,
  prevIcon,
  nextIcon,
}) => {
  return (
    <Pagination
      current={current}
      pageSize={pageSize}
      total={total}
      onChange={onChange}
      onShowSizeChange={(_, size) => onPageSizeChange(size)}
      showSizeChanger
      showQuickJumper
      showTotal={(total) => `共 ${total} 条`}
      prevIcon={prevIcon || <PaginationButton>上一页</PaginationButton>}
      nextIcon={nextIcon || <PaginationButton>下一页</PaginationButton>}
      locale={{
        items_per_page: '条/页',
        jump_to: '跳至',
        jump_to_confirm: '确定',
        page: '页',
      }}
    />
  );
};

export default CustomPagination; 